@import "compass";
@import "mixins.scss";

.routeContent {
  overflow: auto;
}
.listContainer {
  overflow: auto;
  @include padding-right(24px);
  .recordItem {
    margin-bottom: 8px;
    .recordItemInfo {
      margin-bottom: 12px;
      img {
        width: 40px;
        height: 40px;
        background: #33ab9f;
        margin-right: 12px;
      }
      .serviceInfo {
        @include justify-content(space-between);
      }
      .serviceInfoDetail {
        height: 20px;
        line-height: 20px;
      }
      .serviceName {
        margin-right: 40px;
      }
      .sendTyeInfo {
        font-size: 12px;
      }
      .labels {
        @include justify-content(flex-end);
        @include align-items(center);
        .layui-badge {
          width: 58px;
          height: 22px;
          line-height: 22px;
          margin-right: 12px;
        }
      }
    }
    .targetsOperate {
      @include align-items(center);
      .layui-progress {
        margin-right: 12px;
      }
      .layui-btn {
        margin-left: 48px;
      }
    }
    .tabs {
      button {
        border-bottom: none;
      }
    }
    .layui-btn {
      width: 58px;
    }
    .targetsList {
      border: 1px solid #ccc;
      .listItem:hover {
        background: none !important;
      }
    }
  }
}
.welcomeContainer,.replyContainer,.manageContainer {
  overflow: auto;
  .setSendInfo {
    width: 296px;
  }
  .welcomeOptions {
    @include padding2(12px, 24px);
    @include flex-shrink(0);
    overflow: auto;
    .toggleOwner {
      margin-bottom: 12px;
    }
    .groupListTitle {
      margin: 12px 0;
    }
    .groupList {
      @include padding-right(18px);
      overflow: auto;
      .listItem {
        padding: 0;
        input {
          margin-right: 6px;
        }
        &:hover {
          background: none !important;
        }
      }
    }
  }
  .settingOption {
    width: 290px;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    @include padding2(24px ,24px);
    @include flex-shrink(0);
    padding-bottom: 0;
    .option {
      @include align-items(center);
      margin-bottom: 24px;
      input {
        width: 72px;
        margin: 0 4px;
      }
    }
    .welcomeName input {
      width: 150px;
    }
    .replies {
      overflow: auto;
      .addQuickReply,.quickReplies {
        padding: 0;
      }
    }
    .submit {
      @include justify-content(center);
      margin: 24px 0 12px 0;
    }
  }
  .welcomeList {
    border-top: 1px solid #ccc;
    @include padding2(24px, 12px);
    .targetsOperate {
      @include justify-content(flex-end);
    }
  }
}
.releaseContainer {
  .subTitle {
    margin: 24px 0 8px 24px;
  }
  .releaseServiceAccounts {
    margin: 12px 0;
    .serviceItem {
      @include padding-left(24px);
      .deleteBox {
        width: 58px;
        height: 58px;
        @include justify-content(center);
        @include align-items(center);
        i {
          display: none;
          font-size: 26px;
        }
      }
      &:hover {
        background: #f2f2f2 !important;
        .deleteBox i {
          display: block;
          cursor: pointer;
        }
      }
    }
  }
  .settingOptions {
    width: 295px;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    overflow: auto;
    @include padding-right(12px);
    .adHeader {
      @include justify-content(space-between);
      span {
        margin-top: 28px;
      }
    }
    .settingOption {
      margin: 4px 24px;
      @include display-flex;
      @include flex-direction(row);
      @include align-items(center);
      span {
        margin: 0 4px;
      }
      .layui-input {
        width: 76px;
        &.warnTimes {
          width: 42px;
        }
      }
    }
    .settingType {
      margin-top: 24px;
    }
    .warnTimeOption {
      margin-right: 0;
    }
    .settingButtons {
      margin: 24px 0;
      @include justify-content(space-around);
      button {
        width: 72px;
        text-align: center;
      }
    }
  }
  .releaseListContainer {
    border-top: 1px solid #ccc;
    .tabs {
      margin-left: 24px;
      .tab {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
    .recordList {
      border: 1px solid #ccc;
      background: #fff;
      margin: 0 24px 24px 24px;
      overflow: auto;
      @include padding-right(24px);
      .listItem:hover {
        background: none !important;
      }
    }
  }
  .dialogOptions {
    overflow: auto;
    height: 180px;
  }
  .messageOption, .nicknameOption {
    @include align-items(center);
    margin-bottom: 12px;
    .inlineBlockSpan {
      width: 98px;
      display: inline-block;
    }
    .layui-input {
      width: 160px;
      margin: 0 12px;
    }
  }
  .warnMessageTitle {
    margin: 16px 0 24px 0;
  }
  .warnMessageText {
    resize: none;
    outline: none;
    height: 120px;
    width: 100%;
  }
  .whiteListDialog {
    width: 380px;
    padding-bottom: 12px;
    .userList,.whiteList {
      margin-top: 12px;
      @include flex-wrap(wrap);
      @include align-content(flex-start);
    }
    .user {
      @include flex-shrink(0);
      margin-top: 8px;
      margin-right: 8px;
      width: 102px;
      img {
        width: 40px;
        height: 40px;
        background: #33ab9f;
        margin-right: 6px;
      }
      .userName {
        @include justify-content(space-between);
      }
    }
    .listTitle {
      margin: 24px 0;
    }
    .searchContainer {
      @include align-items(center);
      .layui-input {
        margin: 0 8px;
        width: 160px;
      }
    }
  }
}
.replyContainer {
  .settingOption {
    overflow: auto;
  }
  .replies {
    @include flex-shrink(0);
  }
  .option {
    .layui-input {
      @include flex-grow(1);
      margin-right: 12px !important;
    }
    .layui-btn {
      width: 58px;
    }
  }
  .tabs {
    .layui-btn {
      width: 72px !important;
    }
  }
  .labels {
    .layui-badge {
      margin: 0 6px 8px 0;
    }
  }
  .targetsList {
    .labels {
      margin: 12px 0 0 12px;
    }
  }
}
.manageContainer {
  .settingOption {
    overflow: auto;
  }
  .welcomeOptions {
    padding: 0;
  }
  .groupList {
    overflow: auto;
    @include padding-left(2px);
  }
  .listHead {
    @include align-items(center);
    @include justify-content(space-between);
    margin-right: 24px;
    .subTitle {
      line-height: 26px;
    }
    input {
      width: 180px;
      height: 26px;
      margin: 0 12px;
    }
    .searchMember {
      @include padding-right(26px);
      background-image: image-url('search.png');
      background-position: top 3px right 3px;
      background-repeat: no-repeat;
      background-size: 20px;
    }
  }
  .listContainer {
    border: 1px solid #ccc;
    @include padding2(12px, 24px);
    @include flex-wrap(wrap);
    @include align-content(flex-start);
    .listItem {
      width: 250px;
      margin-bottom: 8px;
      .userOperate {
        @include justify-content(space-between);
        button {
          width: 58px;
          margin: 2px 8px;
        }
      }
    }
    .listItem:hover {
      background: none !important;
    }
  }
  .dismissDialog {
    width: 280px;
    height: 150px;
    .dismissText {
      margin-top: 12px;
      text-align: center;
    }
  }
  .deleteUserDialog {
    width: 280px;
    height: 320px;
    .dismissText {
      margin: 12px 0;
    }
    .dialogUserlist {
      height: 150px;
      overflow: auto;
      .listItem:hover {
        background: none !important;
      }
      input {
        margin-right: 6px;
      }
    }
  }
}
.chatContainer {
  .chartsData {
    border-top: 1px solid #ccc;
    overflow: auto;
    @include padding2(24px, 24px);
    .chartTitle {
      @include justify-content(space-between);
      @include align-items(center);
      .clickedSpan {
        margin-left: 12px;
        margin-right: 24px;
      }
    }
    .chartProfile {
      @include justify-content(space-around);
      margin-top: 24px;
    }
    .profileItem {
      border: 1px solid #ccc;
      font-size: 16px;
      @include border-radius(8px);
      @include justify-content(space-around);
      @include align-items(center);
      span {
        margin: 12px;
      }
    }
    .insideItem {
      height: 100%;
      border-left: 1px solid #ccc;
      div {
        flex: 1;
        @include display-flex;
        @include align-items(center);
        @include justify-content(center);
        @include padding2(6px, 8px);
      }
    }
    .leftProfile {
      @include align-items(center);
    }
    .borderBt {
      border-bottom: 1px solid #ccc;
    }
    .chartHeader {
      margin-top: 24px;
      @include align-items(center);
      .subTitle {
        margin-bottom: 0;
      }
      .range {
        margin: 0 6px;
        width: 48px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        border: 1px solid #ccc;
        @include border-radius(6px);
        &.active {
          border-color: #1E9FFF;
        }
      }
      .layui-form-mid {
        margin-left: 10px;
      }
    }
    .charts {
      height: 300px;
      margin-top: 24px;
      @include flex-shrink(0);
    }
    .tableHeader {
      margin: 24px 0;
      @include align-items(center);
      @include justify-content(space-between);
      .subTitle {
        margin-bottom: 0;
      }
    }
  }
}
